<template>
  <div class="page-index">
    <div class="language">
      <t-dropdown :min-column-width="120" trigger="click">
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item 
              v-for="item in app.lang.list" 
              :active="item.code == app.lang.get()"
              @click="app.lang.set(item.code)"
            >
              {{ item.name }}
            </t-dropdown-item>
          </t-dropdown-menu>
        </template>
        <t-button theme="default" variant="text">
          <template #icon>
            <t-icon name="internet" /> 
          </template>
          {{ $t('language') }}
        </t-button>
      </t-dropdown>
    </div>
    <div class="box">
      <img class="logo animate__bounceInDown animate__animated" src="@/assets/logo1.png" />
      <User v-if="!tabs" @tabs="tabs = 1" />
      <Account v-else @tabs="tabs = 0" />
    </div>
    <div class="copyright">{{ $t('copyright') }}</div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import User from './login/user.vue'
  import Account from './login/account.vue'
  const tabs = ref(1)
</script>

<style lang="scss">
  @import '@/style/global';

  .page-index{
    height: 100%;  
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .language{
      position: absolute;
      right: 20px;
      top: 20px; 
    }

    .box{
      width: 350px;
      height: 630px;
      margin: 0 auto;
      
      .logo{
        display: block;
        margin: 0 auto;
        margin-bottom: 80px;
        width: 110px;
      }

      .name{
        font-size: 30px;
        height: 70px;
        color: $color-title;
        margin-top: -20px;
        font-weight: 600;
      }

      .back{
        padding: 40px;
        text-align: center;
      }
    }

    .copyright {
      width: 100%;
      text-align: center; 
      font-size: 14px;
      position: absolute;
      left: 0;
      bottom: 64px;
      color: var(--td-text-color-placeholder);
    }
  }
</style>
